import { ProColumns, ProTable } from '@/components/Pro';
import { realTimeMonitoringControllerClusterOverview as List } from '@/services/ess/realTimeMonitoring';
import { DATABASE_TYPE_ENUM, fetchDictInfo } from '@/utils';
import React, { useEffect, useState } from 'react';
import { useIntl } from 'umi';
import { useSelectedDeviceNode } from '../../SelectedDeviceNodeContext';
import Styles from './index.less';
interface Item {
  label: string;
  value: string | number;
  remark?: string;
}
export const BatteryClusterOverview: React.FC = () => {
  const intl = useIntl();
  const deviceNode = useSelectedDeviceNode();
  const [onlinState, setOnlieState] = useState<Item[]>([]);
  const [chargeDischargeStatusOptions, setChargeDischargeStatusOptions] = useState<Item[]>([]);
  // const faultTypes = [
  //   {
  //     value: 0,
  //     label: intl.formatMessage({ id: 'stationRealtimeMonitoring.normal' }),
  //   },
  //   {
  //     value: 1,
  //     label: intl.formatMessage({ id: 'stationRealtimeMonitoring.error' }),
  //   },
  // ];

  // console.log(faultTypes);

  useEffect(() => {
    (async () => {
      try {
        //在线状态字典
        let OnlineState = await fetchDictInfo(DATABASE_TYPE_ENUM.ONLINE_STATUS);
        setOnlieState(OnlineState || []);

        let ChargeStatus = await fetchDictInfo(DATABASE_TYPE_ENUM.CHARGE_STATUS);
        setChargeDischargeStatusOptions(ChargeStatus || []);
      } catch (error) {}
    })();
  }, []);

  const columns: ProColumns[] = [
    {
      title: intl.formatMessage({ id: 'data.s/N' }),
      dataIndex: 'pageIndex',
      valueType: 'index',
      search: false,
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.batteryClusterName' }),
      dataIndex: 'deviceName',
      valueType: 'text',
      render: (_, record) => record?.name,
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.onlineStatus' }),
      dataIndex: 'onlineState',
      valueType: 'select',
      fieldProps: {
        maxTagCount: 'responsive',
      },
      search: false,
      render: (_, record) => {
        let arr = onlinState.filter((res) => Number(res?.value) === Number(record?.onlineState));
        return arr[0]?.label || '--';
      },
    },
    // {
    //   title: intl.formatMessage({ id: 'stationRealtimeMonitoring.faultStatus' }),
    //   dataIndex: 'faultStatus',
    //   valueType: 'select',
    //   fieldProps: {
    //     maxTagCount: 'responsive',
    //     options: faultTypes,
    //   },
    //   render: (_, record) => {
    //     let arr = faultTypes.filter((res) => Number(res?.value) === Number(record?.faultStatus));
    //     return arr[0]?.label || '--';
    //   },
    // },
    // {
    //   title: intl.formatMessage({ id: 'data.faults' }),
    //   dataIndex: 'faultCount',
    //   search: false,
    // },
    {
      title: intl.formatMessage({ id: 'data.chargeDischargeStatus' }),
      dataIndex: 'chargeState',
      valueType: 'select',
      fieldProps: {
        maxTagCount: 'responsive',
      },
      search: false,
      render: (_, record) => {
        let arr = chargeDischargeStatusOptions.filter(
          (res) => Number(res?.value) === Number(record?.chargeStatus),
        );
        return arr[0]?.label || '--';
      },
    },
    {
      title: 'SOC(%)',
      dataIndex: 'soc',
      search: false,
    },
    {
      title: `${intl.formatMessage({ id: 'data.activePower' })}`,
      dataIndex: 'activePower',
      search: false,
    },
    {
      title: `${intl.formatMessage({ id: 'stationRealtimeMonitoring.dayCharge' })}`,
      dataIndex: 'dailyChargeElectricity',
      search: false,
    },
    {
      title: `${intl.formatMessage({ id: 'stationRealtimeMonitoring.dayDischarge' })}`,
      dataIndex: 'dailyDisChargeElectricity',
      search: false,
    },
    {
      title: `${intl.formatMessage({ id: 'stationRealtimeMonitoring.maxTemp' })}`,
      dataIndex: 'tmax',
      search: false,
    },
    {
      title: `${intl.formatMessage({ id: 'stationRealtimeMonitoring.moduleMaxTempLoc' })}`,
      dataIndex: 'maxTemperatureBmu',
      search: false,
    },
    {
      title: `${intl.formatMessage({ id: 'stationRealtimeMonitoring.minTemp' })}`,
      dataIndex: 'tmin',
      search: false,
    },
    {
      title: `${intl.formatMessage({ id: 'stationRealtimeMonitoring.moduleMinTempLoc' })}`,
      dataIndex: 'minTemperatureBmu',
      search: false,
    },
    //新家最高电压相关
    {
      title: `${intl.formatMessage({ id: 'stationRealtimeMonitoring.moduleMaxV' })}`,
      dataIndex: 'vmax',
      search: false,
    },
    {
      title: `${intl.formatMessage({ id: 'stationRealtimeMonitoring.moduleMaxVLoc' })}`,
      dataIndex: 'maxVoltageBmu',
      search: false,
    },
    {
      title: `${intl.formatMessage({ id: 'stationRealtimeMonitoring.moduleMinV' })}`,
      dataIndex: 'vmin',
      search: false,
    },
    {
      title: `${intl.formatMessage({ id: 'stationRealtimeMonitoring.moduleMinVLoc' })}`,
      dataIndex: 'minVoltageBmu',
      search: false,
    },
  ];

  const scroll = {
    x: 'max-content',
    y: 460,
  };

  return (
    <ProTable
      className={Styles.hideXscroll}
      columns={columns}
      params={{
        deviceCode: deviceNode?.deviceCode ?? undefined,
      }}
      request={async (values) => {
        try {
          let params = {
            areaId: deviceNode?.areaId?.toString() ?? undefined,
            deviceType: deviceNode?.deviceType ?? undefined,
            ...values,
          };

          let reslut = await List(params);
          return reslut;
        } catch (err) {
          console.log(err, '错误');
        }
      }}
      scroll={scroll}
      sticky
      rowKey="clusterId"
      search={{
        defaultCollapsed: false,
      }}
      pagination={{
        showQuickJumper: true,
      }}
      dateFormatter="string"
    />
  );
};
